<div [@routerTransition] id="TenantDashboard" (click)="clickContainer()">

    <div class="content d-flex flex-column flex-column-fluid">

        <sub-header [ngClass]="{'yayi': customTheme=='yayi'}" [title]="'PassengerDashboard' | localize"
            [description]="'DashboardHeaderInfo' | localize">
            <div role="actions">
                <div class="row" style="position: absolute;top: 0;right: 20%;width: 15%;">
                    <div class="form-group col-12">
                        <div class="form-group ">
                            <div class="input-group">
                                <select class="form-control" [(ngModel)]="nowDashboardId" name="nowDashboardId"
                                    (ngModelChange)="changeDashboard()">
                                    <option value="">————定制报表————</option>
                                    <option [value]="dashboard.id" *ngFor="let dashboard of dashboardList">
                                        {{dashboard.name}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row" style="position: absolute;top: 0;right: 5%;width: 15%;">
                    <div class="form-group col-12">
                        <div class="form-group ">
                            <div class="input-group">
                                <select class="form-control" [(ngModel)]="nowDeviceId" name="nowDeviceId"
                                    (ngModelChange)="changeDevice()">
                                    <option value="">————客流设备————</option>
                                    <option [value]="device.id" *ngFor="let device of deviceList">
                                        {{device.name}}
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </sub-header>

        <div [class]="containerClass">
            <div class="card card-custom gutter-b">
                <div class="card-body">
                    <div class="row">
                        <!-- 设备在线情况 -->
                        <div class="col-12" *ngIf="isGranted('Pages.Tenant.Dashboard.Dashboard.DeviceOnlineDuration')">
                            <div class="kt-portlet" origin>
                                <div class="kt-portlet__head row" style="position:relative;">
                                    <div class="kt-portlet__head-caption col-5">
                                        <div class="kt-portlet__head-title" style="margin-top:1rem;">
                                            <h3 class="kt-portlet__head-text">
                                                {{nowDashboard?.name}}
                                                {{nowDevice?.name}}
                                            </h3>
                                        </div>
                                    </div>

                                    <div class="col-2" style="margin-top:1rem;">
                                        <div class="form-group">
                                            <div class="btn-group btn-group-devided" data-toggle="buttons">
                                                <label class="btn kt-btn--pill btn-secondary"
                                                    [ngClass]="{'active': dateType == 'mm'}"
                                                    (click)="changeViewType('mm')">
                                                    <input type="radio" name="dataChartType" value="mm" class="toggle">
                                                    {{l("month")}}
                                                </label>
                                                <label class="btn kt-btn--pill btn-secondary"
                                                    [ngClass]="{'active': dateType == 'dd'}"
                                                    (click)="changeViewType('dd')">
                                                    <input type="radio" name="dataChartType" value="dd" class="toggle">
                                                    {{l("day")}}
                                                </label>
                                                <label class="btn kt-btn--pill btn-secondary"
                                                    [ngClass]="{'active': dateType == 'hh'}"
                                                    (click)="changeViewType('hh')">
                                                    <input type="radio" name="dataChartType" value="hh" class="toggle">
                                                    {{l("hour")}}
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="input-group col-5" style="margin-top:1rem;">
                                        <date-range-picker
                                            [dateRangePickerOptions]='{ "opens": "left","singleDatePicker":dateType=="hh"}'
                                            needInitDate="true" #clickDateranger style="width: 60%;"
                                            name="clickDateranger" [(startDate)]="realStartTime"
                                            [(endDate)]="realEndTime" [allowFutureDate]="true" [cssStyle]="'dashboard'"
                                            [admitDelete]="false">
                                        </date-range-picker>

                                        <button class="btn btn-primary" (click)="doSearch()" style="height:3rem;">
                                            <i class="la la-refresh"></i>
                                            {{l("search")}}
                                        </button>
                                        <button class="btn btn-primary" style="height:3rem;" (click)="goExport()"
                                            [buttonBusy]="exportLoading">
                                            <i class="icon-excel"></i>
                                            {{l('export')}}</button>
                                    </div>
                                </div>

                                <div class="zifengData" *ngIf="zifengData">
                                    <div class="data">昨日数据:{{zifengData.yesterday}}</div>
                                    <div class="data">今日数据:{{zifengData.today}}</div>
                                    <div *ngIf="zifengData.percentTip" class="tip"
                                        [ngStyle]="{'color':zifengData.color,'outlineColor':zifengData.color}">
                                        {{zifengData.percentTip}}</div>
                                    <button class="btn btn-primary" style="margin-left:2rem;"
                                        (click)="zifengDownLoad()">
                                        <i class="icon-excel"></i> {{l('export')}} </button>
                                </div>

                                <div class="kt-portlet__body" [busyIf]="deviceChartLoading" *ngIf="showChart">
                                    <div class="row list-separated">
                                        <div class="portlet-body-morris-fit morris-chart"
                                            style="height: 600px;width: 100%;">
                                            <!-- <app-charts #deviceChartDiv chartId="deviceChartDiv" chartType="Line"></app-charts> -->
                                            <!-- <app-charts #deviceChartDiv chartId="deviceChartDiv" chartType="Column"></app-charts> -->
                                            <app-charts #deviceChartDiv chartId="deviceChartDiv"
                                                [chartType]="chartType">
                                            </app-charts>
                                        </div>
                                    </div>
                                </div>


                                <div class="col-12">
                                    <div id="heatmap" style="margin:0 auto;"></div>
                                </div>


                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>